<!-- 租房 -->
<template>
	<view>
		<!-- 自定义顶部导航 -->
		<u-navbar :safeAreaInsetTop="true" bgColor="transparent">
			<view slot="left" class="u-flex">
				<view class="u-flex m-flex-no u-flex-y-center u-m-r-30" @click="nextNav('/pages/zufang/search')">
					<u-icon name="dingwei" customPrefix="master" size="18"></u-icon>
					<view class="u-m-l-10">{{ city }}</view>
				</view>
				<view class="u-flex-1">
					<u-search placeholder="你想找哪里呢？" bgColor="#fff" v-model="keyword" :show-action="false"
						@click="nextNav('/pages/zufang/search')" :disabled="true"></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="">
			<u-swiper :list="bannerlist" radius="0" height='215' keyName="image"></u-swiper>
		</view>
		<view class="u-rela">
			<view class="u-abso m-mg-lr boxleft">
				<view class="u-flex u-flex-between m-bg-w boxleft1">
					<view class="u-p-l-60 u-p-r-60" v-for="(item,index) in list0" :key='index'
						@click="goyan(item.URL,index)">
						<view class="">
							<u--image :src='item.src' width='62' height='84' mode="widthFix"></u--image>
						</view>
						<view class="u-m-t-20">
							<text class="u-p-l-20 u-p-r-20">{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="u-flex u-flex-between u-m-t-30">
					<view class="w_40 m-bg-w m-card u-flex" v-for="(item,index) in list2" :key='index'
						@click='nextNav(item.url)'>
						<view>
							<u--image :src='item.src' width='55' height='48' mode='aspectFit'></u--image>
						</view>
						<view class="u-m-l-30">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-30 m-card">
					<view class="u-flex u-flex-center">
						<u--image :src='src' width='240' height='120' radius='0'></u--image>
					</view>
					<!-- <view class="boxblue u-m-t-30">
						<text>交易流程图</text>
					</view> -->
					<view class="u-flex u-flex-center">
						<u--image :src='src1' width='300' height='575' radius='0' mode='aspectFit'></u--image>
					</view>
				</view>
				<view :style="{ height: 55 + sys.bottom + 'px' }"></view>
			</view>
		</view>
		<tabbar ref="tabbar" @newObj="newObj"></tabbar>
		<obtain :show="obtain" @showchange="obtain = false"></obtain>
		<u-picker :show="regionShow" keyName="name" :columns="[getcity]" @cancel="regionShow = false"
			@confirm="confirm"></u-picker>
		<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				regionShow: false,
				list0: [{
						name: '我要租房',
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/zufang/z-iocn.png',
						URL: '/pages/zufang/liebiao'
					},
					{
						name: '我要出租',
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/zufang/l-iocn.png',
						URL:'/pages/handhousing/guarantee?type=1'
					}
				],
				list2: [{
						name: '帮我找房',
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/handhousing/ZAHOFANG%403x.png',
						url: '/pages/zufang/zhaofang?type=11'
					},
					{
						name: '地图找房',
						src: 'https://neidangjia.oss-accelerate.aliyuncs.com/handhousing/ditu%403x.png',
						url: '/pages/zufang/ditu?type=12'
					}
				],
				city: '',
				getcity: [],
				bannerlist: [],
				src: 'https://neidangjia.oss-accelerate.aliyuncs.com/handhousing/636903bf2a3bb296b0bbfd41325f537.png',
				src1: 'https://neidangjia.oss-accelerate.aliyuncs.com/handhousing/zufang.png'
			};
		},
		async onLoad() {
			this.getcity = await this.require('getcity');
			this.getcity.unshift({
				id: 0,
				name: '不限'
			})
			this.city = this.getcity[1] ? this.getcity[1].name : '东莞市';
			let city = uni.getStorageSync('city');
			if (city) {
				this.city = city;
			}
			this.path = 'propertieslist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				city: this.city
			};
			await this.getList();
			this.bannerlist = await this.require('bannerlist');
			if (this.pageLoad) {
				setTimeout(() => {
					this.pageLoad = false;
				}, 1000);
			}
		},
		methods: {
			async goyan(url,index){
				if(url == '/pages/handhousing/guarantee'){
					if (!await this.getMobile()) {
						return;
					}
				}
				// if (index == 1) {
				// 	this.nextNav('/pages/handhousing/guarantee?type=1')
				// }
				this.nextNav(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxblue {
		border-left: 6rpx solid #0E5642;
		padding-left: 15rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.boxleft {
		top: -30rpx;
		left: 0;
		right: 0;
	}

	.boxleft1 {
		padding: 30rpx;
		border-radius: 10rpx;
		color: #211F20;
		font-size: 24rpx;
	}

	.w_40 {
		width: 48%;
		align-items: center;
		font-size: 24rpx;
		color: #211F20;
	}
</style>
